<template>
  <header class="md-header-base" :class="{ 'md-header-fixed-base': isFixed }">
    <div class="md-header-container">
      <!-- 屏幕尺寸小于768时不显示 -->
      <div class="header-main hidden-xs-only">
        <div class="navs">
          <ul>
            <li v-for="item in navs" :key="item.navigationId" :class="{ 'current': (path === item.pagePath || (item.pagePath==='/' && path==='/goodsDetail')) }">
              <nuxt-link :to="item.pagePath">{{item.name}}</nuxt-link>
            </li>
          </ul>
        </div>
        <div class="logo">
          <nuxt-link to="/">
            <img src="../assets/img/dynamic/logo.png" alt="logo">
          </nuxt-link>
        </div>
        <div class="right-block">
          <div class="search">
            <el-input placeholder="Search..." @blur="handleSearch" @keyup.enter.native="handleSearch" class="input-filed" prefix-icon="el-icon-search" v-model="searchValue">
            </el-input>
          </div>
          <div class="user">
            <nuxt-link class="user-sign" to="/login" v-if="!user">Login</nuxt-link>
            <a class="user-out" to="javascript:;" @click="handleLoginOut()" v-if="user">Logout</a>
            <nuxt-link class="user-center" to="/userCenter" v-if="user">
              <img :src="user.avatar ? user.avatar : require('@/assets/img/dynamic/avatar.png')" />
            </nuxt-link>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: 'MdHeaderBaseComponent',
  props: {
    /** 是否子页面 */
    fixed: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      logoImg: '',
      searchValue: null,
      isFixed: false,
      navs: [],
      path: '/',
      user: null
    }
  },
  watch: {
    fixed: {
      handler (val) {
        this.isFixed = val
      },
      deep: true
    },
    '$route.query': {
      handler (val) {
        this.searchValue = val.searchValue
      },
      immediate: true
    },
    $route: {
      handler (val) {
        this.path = val.path

        if (this.$local.getItem('access_token')) {
          this.user = this.$local.getItem('user')
          // this.getUser()
        }
      },
      deep: true
    }
  },
  mounted () {
    this.path = this.$route.path

    this.getNavs()

    if (this.$local.getItem('access_token')) {
      this.user = this.$local.getItem('user')
      // this.getUser()
    }
  },
  methods: {
    /** 获取用户信息 */
    async getUser () {
      try {
        const res = await this.$axios.get('web/user/getInfo')

        this.$local.setItem('user', res.user)

        this.user = res.user
      } catch (error) {
        console.log(error)
      }
    },
    /** 获取导航信息 */
    async getNavs () {
      try {
        const lll = this.$local.getItem('navs')
        if (!lll) {
          const options = {
            status: '0'
          }
          const res = await this.$axios.post('web/navigation/list', options)
          this.$local.setItem('navs', res.data)
          this.navs = res.data
        } else {
          this.navs = this.$local.getItem('navs')
        }
      } catch (error) {
        console.log(error)
      }
    },
    /** 退出登录 */
    handleLoginOut () {
      this.$store.commit('changeLoginStatus', false)
      this.$local.clear()
      this.user = null
      this.$router.push('/')
    },
    handleMenuClick () {
      this.$store.commit('changeMobileMenu', true) // 开启移动端菜单
    },
    handleKeyUp (event) {
      console.log(event)
      const keycode = event.keyCode
      if (keycode == 13) {
        this.handleSearch()
      }
    },
    handleSearch () {
      if (this.searchValue) {
        this.$router.push({
          path: '/search',
          query: {
            searchValue: this.searchValue
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.md-header-base {
  width: 100%;
  height: $md-header-height;
  box-sizing: border-box;
  background: #fff;
  padding: 0 30px 0 50px;
  box-sizing: border-box;
  .md-header-container {
    // width: $md-page-main-width;
    width: 100%;
  }

  .header-main {
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    margin: 0px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /** 头部LOGO */
    .logo {
      width: 103px;
      height: 31px;
      a {
        display: block;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        text-align: center;
        img {
          width: 100%;
        }
      }
    }
    /** 导航 */
    .navs {
      // flex: 1;
      padding-left: 40px;
      ul {
        width: 100%;
        // max-width: 500px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        list-style: none;
        margin: 0px;
        padding: 0px;
        li {
          padding: 5px 0px;
          display: inline-block;
          margin-right: 35px;
          cursor: pointer;
          &:hover {
            a {
              color: #292929;
              font-weight: 800;
            }
          }
          &:last-child {
            margin-right: 0;
          }
          a {
            font-size: 16px;
            text-decoration: none;
            color: #87888f;
            cursor: pointer;
          }
          &.current {
            a {
              color: #292929;
              font-weight: 800;
            }
          }
        }
      }
    }
    .right-block {
      display: flex;
      align-items: center;
    }
    /** 头部搜索 */
    .search {
      // width: 60px;
      // height: 40px;
      margin-left: 30px;
      box-sizing: border-box;
      overflow: hidden;
      // display: flex;
      // align-items: center;
      // justify-content: center;
      i {
        padding: 10px;
        font-size: 22px;
        color: #4e5969;
        cursor: pointer;
        &:hover {
          color: #4e5969;
        }
      }
      ::v-deep .input-filed {
        width: 234px;
        .el-input__inner {
          height: 38px;
          line-height: 38px;
          border-radius: 19px;
          background: #f2f2f2;
          border-color: #f2f2f2;
          padding-left: 50px;
          &::-webkit-input-placeholder {
            color: #525360;
          }
        }
        .el-input__icon {
          font-size: 20px;
          line-height: 38px;
          color: #525360;
        }
        .el-input__prefix {
          left: 20px;
        }
      }
    }
    /** 头部登录/注册 */
    .user {
      padding-left: 20px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      a {
        font-family: SourceHanSansSC, SourceHanSansSC;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        line-height: 24px;
        text-decoration: none;
        // padding: 6px 0px;
        cursor: pointer;
        height: 38px;
        width: 100px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .user-news {
        width: 18px;
        height: 18px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .user-reg {
        text-align: center;
        color: $md-primary-color;
        border: 1px solid $md-primary-color;
        border-radius: 2px;
        margin-left: 19px;
        padding: 5px 13px;
      }
      .user-sign,
      .user-register,
      .user-out {
        text-align: center;
        color: #fff;
        border-radius: 19px;
        border: 1px solid $md-primary-color;
        background-color: $md-primary-color;
        margin-left: 19px;
      }
      .user-register {
        border: 1px solid $md-primary-sub-color;
        background: $md-primary-sub-color;
      }

      .user-center {
        display: flex;
        align-items: center;
        margin-left: 19px;
        img {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          border: 1px solid #efefef;
          margin-right: 5px;
        }
      }
    }
  }

  /** 吸顶样式 */
  &.md-header-fixed-base {
    position: absolute;
    top: 0;
    z-index: 100;
    // background: rgba(255, 255, 255, 0);
    // box-shadow: 0px 10px 16px 0px rgba(157, 157, 157, 0.16);
    // backdrop-filter: blur(36px);
    // .header-main {
    //   .navs {
    //     ul {
    //       li {
    //         a {
    //           color: #4e5969;
    //         }
    //       }
    //     }
    //   }

    //   // .search {
    //   //   input {
    //   //     background-color: #fff;
    //   //     background-image: url('@/assets/img/icon/icon-search-fixed.png') !important;
    //   //     background-repeat: no-repeat;
    //   //     background-position: 12px center;
    //   //     background-size: 18px 18px;
    //   //     &::-webkit-input-placeholder {
    //   //       color: #86909c;
    //   //     }
    //   //   }
    //   // }
    // }
  }

  .small-size-style {
    width: 100%;
    height: 100%;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    i {
      font-size: 24px;
      color: $md-primary-color;
    }
    .left-box,
    .right-box {
      width: 80px;
      display: flex;
      align-items: center;
    }
    .logo {
      width: 100px;
      height: 30px;
    }
    .right-box {
      justify-content: flex-end;
      a {
        &:first-child {
          display: inline-block;
          margin-right: 20px;
        }
      }
    }
  }
}
</style>